<fly:block name="refill_pagination_search">
	<div id="refill-pagination"></div>
</fly:block>

<fly:block name="pagination_search">
	<div class="clearing"></div>
	<div class="pagination_block">
		<div id="pagination_top" class="pagination pagination_number"></div>
		<div class="search_top">
			<form method="post">
			<fly:translate name='text_title'/><fly:modify name="text_title" /> &nbsp;<input class="text title_debug" type="text" value="<fly:variable name='default_text_search' />" name="title_debug" id="title_debug_top" size="30"/>
			<fly:modify name="default_text_search" />
			</form>
			<div class="clear"></div>
			<div class="ajax_loading ajax_loading_bottom"></div>
		</div>	
	</div>
	<div class="clearing"></div>
</fly:block>

<script type="text/javascript">
var title_debug_default = "<fly:translate name='default_text_search'/>";
var text_title = "<fly:translate name='text_title'/>";

var num_items=<fly:variable name='num_items'/>;
var orderTypeImage=false;
var boolPushImage=false;
var sorterBy; 
var orderBY;
var orderField;
var orderType;
var items_per_page = <fly:variable name="item_per_page" />;
var num_display_entries = <fly:variable name="num_display_entries" />;
var origin_title = null;
var current_page;
var timeout = null;
var delay_search = <fly:variable name="delay_search" />;
var delay_one_mili_second = <fly:variable name="delay_fifty_mili_second" />;//FOR browser doesn't reads line by line script
/// Pagination
function pageselectCallbackTop(page_id){
		var limit = (page_id*items_per_page)+" , "+items_per_page;	
		$(".ajax_loading").show();
		title_debug_1 = $('#title_debug_top').val()==title_debug_default?'':$('#title_debug_top').val();
		if (timeout) clearTimeout(timeout);
		timeout = setTimeout(function(){
						$("#item_list").html($.ajax({
	                        url: '<fly:variable name="rep_ajax" /><fly:variable name="rep_item_lister" />',
	                        type: "POST",
	                		data: "limit="+limit+"&id_type="+$('#id_news_type').val()+"&title_debug="+title_debug_1+"&orderBy="+(orderBY?orderBY:''),
	                		async: false,
	                		error: function(){
						        return 'Please try again!';
						    },
						    complete: function(){
						    	$("#pagination_bottom").pagination(num_items, {
									items_per_page: items_per_page,
									num_edge_entries: 3,
									num_display_entries: num_display_entries,
									current_page: page_id,				
		            				callback: pageselectCallbackBottom
								});
				    			$(".ajax_loading").hide();
						    }
	                    }).responseText);
				}, delay_one_mili_second);
				
		//To determine which page we are in
        jQuery.each($('span.current'), function() {
        	if($(this).text()==(page_id+1)){
        		$(this).addClass("cur");
        	}
        });
	    				        
}
$(document).ready(function(){
	$('.title_debug').css('color',"gray");
	$.trim($('.title_debug').val())==''?$('.title_debug').val(title_debug_default):$('.title_debug').val($('#title_debug_top').val());
	
	$('.title_debug').focus(function(){
		if($(this).val()==title_debug_default){
			$(this).val('');
		}
	});
	///loading hider
	$('#title_debug_top').keydown(function(event){ //Prevent refreshing when use Enter key in the title search
		if(event.keyCode == 13 || event.keyCode == 116)
		return false;
		else
		return true; 
	});
	/// Searching
	$('.title_debug',this).keyup(function(){
		$('.title_debug').css('color',"black");
		if(this.value == origin_title || (jQuery.trim(this.value)=='' &&  this.value == origin_title)){
			return false;
		}
		title_debug = this.value;
		$(".ajax_loading").show();
		if (timeout) clearTimeout(timeout);
			timeout = setTimeout(function(){
				$('.title_debug').val(title_debug);
				num_items = $.ajax({
		                url: '<fly:variable name="rep_ajax" /><fly:variable name="rep_item_counter" />',
		                type: "POST",
		                async: false,
			   			data: "title_debug="+title_debug+"&id_type="+$('#id_news_type').val()+"&orderBy="+(orderBY?orderBY:'')
	           			}).responseText;
		
		       	$("#pagination_top").pagination(num_items, {
		           	items_per_page: items_per_page,
					num_edge_entries: 3,
					num_display_entries: num_display_entries,
		            callback: pageselectCallbackTop
		        });
		        $("#pagination_bottom").pagination(num_items, {
					items_per_page: items_per_page,
					num_edge_entries: 3,
					num_display_entries: num_display_entries,
          			callback: pageselectCallbackBottom
				});
		       	$("#item_list").html($.ajax({
		       		url: '<fly:variable name="rep_ajax" /><fly:variable name="rep_item_lister" />',
		            type: "POST",
					data: "limit=0 , "+ items_per_page +"&title_debug="+title_debug+"&id_type="+$('#id_news_type').val()+"&orderBy="+(orderBY?orderBY:''), 
					async: false,
               		error: function(){
				        return 'Please try again!';
				    },
				    complete: function(){
				    	$(".ajax_loading").hide();
				    }
		        }).responseText);
			}, delay_search);
	origin_title = this.value;				
	});
        	
	/// Pagination
		var page='<fly:variable name="page" />';		
		if(page > 0){
			current_page = page-1;
		}else{
			current_page = 0;
		}
		///If has only 1 page, no need to show pagination
		//if(<fly:variable name='num_items'/>/items_per_page<=1){$('#pagination-search').hide();}	
	
		$("#pagination_top").pagination(num_items, {
			items_per_page: items_per_page,
			num_edge_entries: 3,
			num_display_entries: num_display_entries,
			current_page: current_page,
			callback: pageselectCallbackTop
		});	
		
			

    /// Sorting
    r = 1;
    $('.header').click(function(e) { 
    
    	//orderField=$(".header",this).attr("id"); 
    	orderField=$(this).attr("id");    	
    	r%2==0?orderType=' ASC':orderType=' DESC';

    	if(boolPushImage) { // click on image
        	if(orderTypeImage) { // orderTypeImage = true is sort by desc
            	orderType = ' DESC';
        	}else {
            	orderType = ' ASC';
        	}
        	boolPushImage = false;
    	}
    	
    	if(orderField){
    		orderBY = orderField+orderType;
    	}else{
    		return false;
    	}
    	// if not click on image we need r to increase when we click on thead td to inverse sorter
    	if(!boolPushImage) r++;
    	
	    $spancur = $("span.cur").text();
	    $spancur = $spancur>0?$spancur-1:$spancur;
	    var start = (($spancur*items_per_page));
	    title_debug = '';
	    
	 
	    $("#"+orderField+"_l").html('<img  src="/_design/loading.gif" /> '); 
     	
		$("#item_list").html($.ajax({
	            url: '<fly:variable name="rep_ajax" /><fly:variable name="rep_item_lister" />',
	            type: "POST",	 			
	 			data: "limit="+start+" , "+ items_per_page +"&title_debug="+title_debug+"&id_type="+$('#id_news_type').val()+"&orderBy="+(orderBY?orderBY:''),
	 			async: false,
    		 	complete: function(){
			    	 $(".loading").empty(); 
			    }
	     }).responseText);
   
    	if(orderType==" ASC"){
    		//$(".header", this).addClass("headerSortUp");
    		$(this).addClass("headerSortUp");
    		$(this).removeClass("headerSortDown");
    	}
    	else{
    		$(this).addClass("headerSortDown");
    		$(this).removeClass("headerSortUp");
    	}
    		    		
    	jQuery.each($('thead td'), function() {                		
			if($(".header",this).attr("id")!=orderField){
				$(".header", this).removeClass("headerSortUp");
			      			$(".header", this).removeClass("headerSortDown");
			}			
		});
		
		
    return orderBY,orderField,orderType;
	}).mousedown(function() {return false;});
	
	$('.current').mousedown(function() {return false;});
	
	$('thead td').prepend('<div id="group-sorter"><div class="sort-asc"></div><div class="sort-desc"></div></div>');
	//$(".header").prepend('<div id="group-sorter"><div class="sort-asc"></div><div class="sort-desc"></div></div>');
	
	// sorter by ASC
	$('thead td div .sort-asc').click(function(e) {
		boolPushImage = true;
		orderTypeImage = false; // sort by asc
	});
	
	// sorter by DESC
	$('thead td div .sort-desc').click(function(e) {
		boolPushImage = true;
		orderTypeImage = true; // sort by desc
	});
			
});
	
</script>